<template>
  <view class="bg-gray-100 min-h-screen">
    <!-- 顶部大搜索框 -->
    <view class="search-bar">
      <wd-search
        v-model="searchValue"
        placeholder="搜索"
        shape="round"
        background="#f5f6fa"
        :show-action="false"
        class="big-search"
        input-class="text-lg"
        action-text=""
      />
    </view>

    <!-- 分类Tab 横向滚动 -->
    <scroll-view
      scroll-x
      class="category-tabs-scroll px-2 pt-2 mb-2"
      show-scrollbar="false"
    >
      <view class="category-tabs">
        <text
          v-for="tab in tabList"
          :key="tab.value"
          class="tab"
          :class="{ active: activeTab === tab.categoryName }"
          @click="changeTab(tab)"
        >
          {{ tab.categoryName }}
        </text>
      </view>
    </scroll-view>

    <!-- 阅读计划卡片 -->
    <view class="plan-card mb-2" style="margin-inline: 24rpx">
      <view class="plan-left">
        <view class="plan-title">阅读计划</view>
        <view class="plan-add-btn" @click="toLink('/pages-sub/task/create-task')">请添加</view>
      </view>
      <view class="plan-month">{{ currentMonth }}月</view>
    </view>

    <!-- 最近阅读 -->
    <view
      class="section-title mt-6 mb-2 flex items-center justify-between"
      style="margin-inline: 24rpx"
    >
      <text class="font-bold text-lg">最近阅读</text>
      <view class="dot"></view>
    </view>
    <view class="horizontal-scroll" style="margin-inline: 24rpx">
      <view
        class="recent-card"
        v-for="book in books"
        :key="book.id"
        style="background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%)"
        @click="toLink(`/pages-sub/index/reading-detail?id=${book.book.id}`)"
      >
        <image :src="book.book.coverUrl" class="recent-cover" mode="aspectFit" />
        <view class="recent-info">
          <view class="recent-title">{{ book.book.title }}</view>
          <view class="recent-desc">{{ book.book.publisher }}</view>
        </view>
        <!-- <view class="recent-count">{{ book.count }}本</view> -->
      </view>
    </view>

    <!-- 牛津树系列 -->
    <view v-for="catogory in categoryList" :key="catogory.id" >
      <view
        class="section-title mt-6 mb-2 flex items-center justify-between"
        style="margin-inline: 24rpx"
      >
        <text class="font-bold text-lg">{{ catogory.categoryName }}</text>
        <view class="dot"></view>
      </view>
      <view class="vertical-list" style="margin-inline: 24rpx">
        <view
          class="series-card"
          v-for="book in catogory.data"
          :key="book.id"
          style="background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%)"
          @click="toLink(`/pages-sub/index/book-list?level=${book.gatherId}&isChoice=0`)"
        >
          <image :src="book.imageUrl" class="series-cover" mode="aspectFit" />
          <view class="series-info">
            <view class="series-title">{{ book.gaterName }}</view>
            <view class="series-desc">{{ book.gaterName }}</view>
          </view>
          <view class="series-count">{{ book.total }}本</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { http } from "@/utils/http";
import { onMounted, ref } from "vue";

const searchValue = ref("");
const tabList = ref([]);
const activeTab = ref("全部");
const categoryList = ref();
const books = ref([])
const page = ref(1);
const pageSize = ref(10);

const recentBooks = ref([]);

// {
//     id: 6,
//     title: "格林童话",
//     desc: "来自用户1031",
//     count: 18,
//     cover: "/static/images/book3.svg",
//     bg: "linear-gradient(135deg, #fbc2eb 0%, #fdc2e0 100%)",
//   },

const seriesBooks = ref([
  {
    id: 1,
    title: "牛津1级",
    desc: "来自用户1026",
    count: 30,
    cover: "/static/images/book1.svg",
    bg: "linear-gradient(135deg, #f9ffb5 0%, #a1ffce 100%)",
  },
  {
    id: 2,
    title: "牛津1级",
    desc: "来自用户1026",
    count: 30,
    cover: "/static/images/book1.svg",
    bg: "linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)",
  },
  {
    id: 3,
    title: "牛津1级",
    desc: "来自用户1026",
    count: 30,
    cover: "/static/images/book1.svg",
    bg: "linear-gradient(135deg, #fbc2eb 0%, #fdc2e0 100%)",
  },
  {
    id: 4,
    title: "牛津1级",
    desc: "来自用户1026",
    count: 30,
    cover: "/static/images/book1.svg",
    bg: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)",
  },
  {
    id: 5,
    title: "牛津1级",
    desc: "来自用户1026",
    count: 30,
    cover: "/static/images/book1.svg",
    bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
  },
]);

const currentMonth = new Date().getMonth() + 1;

onMounted(async () => {
 
  uni.getStorage({key:"token",success: (res) => {console.log(res.data)}})
  
  uni.showLoading({
    title: '加载中',
    mask: true
  });
  getAllCategory();
  getRecentBooks()
  getUserReadRecords()
  uni.hideLoading()

});

// const test = () => {
//   console.log("test")
//   type IFooItem = { name: string }
//   const data = {
//     className: "李四",
//     teacherId: 5459,
//     classCode: "21147395171"
//   }
//   http.post('/admin-api/picturebook/classes/create', data)
// }

const getUserReadRecords = async () => {
  http.get(`/admin-api/picturebook/reading-record/page?pageNo=${page.value}&pageSize=${pageSize.value}`).then(async res => {
    console.log("getUserReadRecords",res);
    books.value = res.data.list
  })
}

// 获取所有分类
const getAllCategory = async () => {
  await http.get("/admin-api/picturebook/category/page").then((res) => {
    categoryList.value = res.data.list;
  });

  // 获取分类后请求分类下的数据
  getAllBookById()
};

// 根据分类id获取分类下的所有书籍
const getAllBookById = async () => {
  tabList.value = []
  tabList.value.push({
    categoryName: '全部'
  })
  categoryList.value.forEach(async (item) => {
    tabList.value.push(item)
    await http
      .get(
        `/admin-api/picturebook/book-gather/get-by-category-id?categoryId=${item.categoryId}`
      )
      .then((res) => {
        item.data = res.data;
      });
  });
};

const getRecentBooks = async () => {
  // recentBooks
  await http
      .get(
        `/admin-api/picturebook/reading-record/page?pageNo=1&pageSize=10`
      )
      .then((res) => {
        recentBooks.value = res.data.list
        console.log(recentBooks.value)
      });
}

// 切换tab
const changeTab = async (val) => {
  uni.showLoading({
    title: '加载中',
    mask: true
  });
  activeTab.value = val.categoryName
  if(val.categoryName != "全部") {
    categoryList.value = []
    await http
      .get(
        `/admin-api/picturebook/book-gather/get-by-category-id?categoryId=${val.categoryId}`
      )
      .then((res) => {
        categoryList.value.push(val)
        categoryList.value.data = res.data
      });
  } else {
    getAllCategory()
  }

  uni.hideLoading()
}

const toLink = (url) => {
  uni.navigateTo({ url });
};
</script>

<style scoped>
.search-bar {
  width: 100%;
  margin-bottom: 12px;
}
.big-search {
  width: 100%;
  background: #f5f6fa !important;
  border-radius: 32px;
  box-shadow: none;
  padding: 0 8px;
}
.category-tabs-scroll {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 10px;
}
.category-tabs {
  display: flex;
  align-items: center;
  gap: 0px;
  padding: 0 2px;
}
.tab {
  padding: 0 8px;
  color: #bdbdbd;
  font-size: 16px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  height: 36px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
}
.tab.active {
  color: #fff;
  background: #1976d2;
  font-weight: bold;
}
.plan-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.plan-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-title {
  font-size: 20px;
  font-weight: bold;
}
.plan-add-btn {
  background: #1976d2;
  color: #fff;
  border-radius: 16px;
  padding: 4px 16px;
  font-size: 14px;
  width: fit-content;
}
.plan-month {
  font-size: 28px;
  font-weight: bold;
  color: #1976d2;
  background: #f5f6fa;
  border-radius: 12px;
  padding: 8px 18px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
}
.dot {
  width: 10px;
  height: 10px;
  background: #1976d2;
  border-radius: 50%;
}
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 4px;
}
.recent-card {
  min-width: 180px;
  height: 100px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 8px;
  position: relative;
  margin-bottom: 8px;
}
.recent-cover {
  width: 44px;
  height: 64px;
  border-radius: 8px;
  background: #f5f6fa;
  margin-right: 10px;
}
.recent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recent-title {
  font-size: 16px;
  font-weight: bold;
}
.recent-desc {
  font-size: 13px;
  color: #888;
}
.recent-count {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #222;
  color: #fff;
  font-size: 12px;
  border-radius: 12px;
  padding: 2px 10px;
}
.vertical-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.series-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 8px;
  position: relative;
  height: 120px;
}
.series-cover {
  width: 64px;
  height: 96px;
  border-radius: 8px;
  background: #f5f6fa;
  margin-right: 10px;
}
.series-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.series-title {
  font-size: 16px;
  font-weight: bold;
}
.series-desc {
  font-size: 13px;
  color: #888;
}
.series-count {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #222;
  color: #fff;
  font-size: 12px;
  border-radius: 12px;
  padding: 2px 10px;
}
</style>
